<template>
  <div class="w-100 h-100">
    <div id="xmsl" style="width: 100%; height: 100%"></div>
  </div>
</template>

<script setup lang="ts">
import { useOptions } from "@/hook/useOptions";
import * as echarts from "echarts";

let option = {
  background: "transparent",

  legend: { show: false },
  grid: {
    left: "15%",
    right: "12%",
    top: "5%",
    bottom: "10%",
    containLabel: true,
  },
  xAxis: [
    {
      name: "个",
      type: "value",
      show: true,
      axisLine: {
        //x轴坐标轴，false为隐藏，true为显示
        show: false,
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(92,225,255,0.5)", // 设置分割线颜色为蓝色
          type: "dashed", // 设置分割线为虚线
        },
      },
      axisLabel: {
        fontSize: 20,
        interval: 0,
        fontFamily: "OPPOSans-Regular",
        color: "#667A8E",
      },
      nameTextStyle: {
        color: "#DEDEDE",
        fontSize: 20,
        fontFamily: "OPPOSans-Regular",
        padding: [0, 0, 30, 0], // 上, 右, 下, 左
      },
    },
  ],
  yAxis: [
    {
      show: false,
      splitLine: { show: false },
      axisLine: { show: false },
      type: "category",
      axisTick: { show: false },
      inverse: true,
    },
    {
      type: "category",
      inverse: true,
      axisTick: "none",
      axisLine: "none",
      show: true,
      axisLabel: {
        textStyle: {
          color: "#DEDEDE",
          fontSize: 20,
        },
        formatter: function (value: any, index: any) {
          return value;
        },
      },

      data: <any>[],
    },
  ],
  series: [
    {
      show: true,
      name: "",
      type: "bar",
      data: <any>[],
      barWidth: 5, // 柱子宽度
      showBackground: true,
      label: {
        show: true,
        width: 200,
        offset: [0, 0],
        color: "rgba(255, 255, 255, 0.6)",
        fontFamily: "SourceHanSansCN-Normal",
        fontSize: 20,
        fontWeight: 500,
        position: "left",
        formatter: function (params: any) {
          return params.data.name;
        },
      },
      itemStyle: {
        show: true,
        barBorderRadius: [10, 10, 10, 10],
        formatter: function (params: any) {
          return params.data.name;
        },
        // color: {
        //     type: "linear",
        //     colorStops: [{ offset: 1, color: "rgba(30, 230, 231, 1)", }, { offset: 0, color: "rgba(63, 149, 206, 0.3)", },],
        // },
      },
      emphasis: { disabled: true },
    },
    {
      name: "",
      type: "scatter",
      emphasis: { scale: false },
      symbol: "rect",
      symbolSize: [3, 15], // 进度条白点
      itemStyle: {
        show: true,
        barBorderRadius: [10, 10, 10, 10],
        color: "#FFF",
        shadowColor: "rgba(255, 255, 255, 0.5)",
        shadowBlur: 5,
        borderWidth: 1,
        opacity: 1,
      },
      z: 2,
      data: <any>[],
      animationDelay: 500,
    },
  ],
};
onMounted(() => {});

const jsonData: any = inject("jsonData");
const props = defineProps({
  year: {
    default: 2024,
  },
});

const current = computed(() => {
  let data = [];
  try {
    data = jsonData.value.underJsc.xmsl[props.year];
  } catch (error) {}
  return data;
});

const types = ["规划阶段", "施工阶段", "竣工阶段", "运营阶段"];

watch(
  () => current.value,
  (val: any) => {
    if (val) {
      const data = val;

      const dataList = types.map((item, index) => ({
        name: item,
        value: data[index],
      }));

      option.series[0].data = dataList.map((item) => ({
        ...item,
        itemStyle: {
          color: {
            type: "linear",
            colorStops: [
              { offset: 1, color: "rgba(30, 230, 231, 1)" },
              { offset: 0, color: "rgba(63, 149, 206, 0.3)" },
            ],
          },
        },
      }));
      option.series[1].data = dataList;

      option.yAxis[1].data = dataList;

      let myChart1 = echarts.init(
        document.getElementById("xmsl") as HTMLElement
      );
      myChart1.setOption(option);
    }
  }
);
</script>

<style lang="less" scoped></style>
